<template>
  <el-dialog
    v-model="isShowDialog"
    :before-close="handleClose"
    title="打印拣货单"
    draggable
    width="1150px"
    append-to-body
  >
    <div style="height: 500px">
      <div>
        <el-button type="primary" @click="clickBatchDel">批量删除</el-button>
      </div>
      <vxe-table
        ref="tableRef"
        style="margin-top: 10px"
        border
        align="center"
        :data="tableList"
        height="300"
        :checkbox-config="{ trigger: 'row' }"
        :row-config="{ isCurrent: true, isHover: true }"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column type="seq" width="80" title="序号"></vxe-column>
        <vxe-column field="breedNum" width="100" title="波次分类">
          <template #default="{ row }">
            <div v-if="row.breedNum == '1'">同品</div>
            <div v-else>{{ row.breedNum }}品</div>
          </template>
        </vxe-column>
        <vxe-column width="220" title="商品名称">
          <template #default="{ row }">
            <div
              v-for="(item, index) in row.detailList"
              :key="index"
              style="display: flex"
            >
              <div style="width: 200px; text-align: left">
                {{ item.skuName }}
              </div>
            </div>
          </template>
        </vxe-column>
        <vxe-column width="100" title="订单数量">
          <template #default> 1 </template>
        </vxe-column>
        <vxe-column field="outCode" width="220" title="出库单号"></vxe-column>
        <vxe-column field="outNum" min-width="100" title="拣货数量">
        </vxe-column>
        <vxe-column fixed="right" width="200" title="操作">
          <template #default="{ row }">
            <el-button type="text" style="color: red" @click="handleDelete(row)"
              >删除</el-button
            >
          </template>
        </vxe-column>
      </vxe-table>

      <div style="padding: 10px">
        <el-row>
          <el-col :span="4">
            <div>
              打印数量合计:
              <span style="font-size: 18px; color: red">{{
                printNumTotal
              }}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              同品订单:
              <span style="font-size: 18px; color: red">{{ alikeTotal }}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              多品订单:
              <span style="font-size: 18px; color: red">{{ muchTotal }}</span>
            </div>
          </el-col>
          <!--          <el-col :span="4">-->
          <!--            <div>2品订单: <span style="font-size: 18px;color: #409EFF;">{{ printNumTotal }}</span></div>-->
          <!--          </el-col>-->
          <!--          <el-col :span="4">-->
          <!--            <div>3品订单: <span style="font-size: 18px;color: #409EFF;">{{ printNumTotal }}</span></div>-->
          <!--          </el-col>-->
          <!--          <el-col :span="4">-->
          <!--            <div>4品订单: <span style="font-size: 18px;color: #409EFF;">{{ printNumTotal }}</span></div>-->
          <!--          </el-col>-->
        </el-row>
        <template v-if="isReprint === 'kd'">
          <!--        快递单-->
          <el-row style="margin-top: 10px">
            <el-col :span="6">
              <div>
                快递单模板:
                <el-select style="width: 150px" v-model="printTemp">
                  <template v-for="(item, index) in printTempList" :key="index">
                    <el-option
                      :label="item.configName"
                      :value="item.printConfigId"
                    ></el-option>
                  </template>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                打印机:
                <el-select
                  v-model="printMachine"
                  clearable
                  placeholder="打印机"
                  style="width: 150px"
                >
                  <template v-for="(item, index) in printNameList" :key="index">
                    <el-option :label="item" :value="item" />
                  </template>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <el-checkbox v-model="isCloseKd">打印后关闭弹框</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="clickPrintKd"
                >快递单打印</el-button
              >
            </el-col>
          </el-row>
        </template>
        <template v-else-if="isReprint === 'fjd'">
          <!--        分拣单-->
          <el-row style="margin-top: 10px">
            <el-col :span="6">
              <div>
                分拣单模板:
                <el-select style="width: 150px" v-model="printTempFjd">
                  <template
                    v-for="(item, index) in printTempListFjd"
                    :key="index"
                  >
                    <el-option
                      :label="item.configName"
                      :value="item.printConfigId"
                    ></el-option>
                  </template>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                打印机:
                <el-select
                  v-model="printMachineFjd"
                  clearable
                  placeholder="打印机"
                  style="width: 150px"
                >
                  <template v-for="(item, index) in printNameList" :key="index">
                    <el-option :label="item" :value="item" />
                  </template>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <el-checkbox v-model="isCloseFjd">打印后关闭弹框</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="clickPrintFjd"
                >分拣单打印</el-button
              >
            </el-col>
          </el-row>
        </template>
      </div>
    </div>

    <!--  快递面单打印区域-->
    <div style="position: absolute; top: -9999px">
      <template v-for="(item, index) in kdPrintData" :key="index">
        <div class="printDiv" :ref="'printDiv' + item?.mailno">
          <div class="printTop">
            <div class="topleft">
              <div style="display: flex">
                <div class="toptext">{{ item?.pdfInfoVo?.mailno }}</div>
                <div class="toptext">{{ item?.pdfInfoVo?.mailno }}</div>
              </div>
              <div class="topTime">{{ item.pdfInfoVo?.create_time }}</div>
            </div>
          </div>
          <div class="printPosition">
            {{ item.pdfInfoVo?.position }} {{ item.pdfInfoVo?.position_no }}
          </div>
          <div class="printCenter">
            <div class="centerLeft">
              <div class="cenLeftA">
                <svg
                  :class="'mailNo' + item?.mailno"
                  style="text-align: center"
                ></svg>
              </div>
              <div class="cenLeftB">
                {{ item.pdfInfoVo?.tp_status }}
                {{ item.pdfInfoVo?.innerProvinceName }}
              </div>
              <div class="cenLeftC">
                <div class="ctext">交</div>
                <div>{{ item.pdfInfoVo?.package_wdjc }}</div>
              </div>
              <div class="cenLeftD">
                <div class="dshou">收</div>
                <div>
                  <div>
                    {{ item.pdfInfoVo?.receiver_name }}
                    {{ item.pdfInfoVo?.receiver_mobile }}
                  </div>
                  <div>
                    {{ item.pdfInfoVo?.receiver_area_names }}
                    {{ item.pdfInfoVo?.receiver_address }}
                  </div>
                </div>
              </div>
              <div class="cenLeftE">
                <div class="eji">寄</div>
                <div>
                  <div>
                    {{ item.pdfInfoVo?.sender_name }}
                    {{ item.pdfInfoVo?.sender_mobile }}
                  </div>
                  <div>
                    {{ item.pdfInfoVo?.sender_area_names }}
                    {{ item.pdfInfoVo?.sender_address }}
                  </div>
                </div>
              </div>
            </div>
            <div class="centerRight">
              <svg
                :class="'mailNo' + item?.mailno"
                style="text-align: center"
              ></svg>
            </div>
          </div>
          <div class="printBottom">
            <template v-for="(item, index) in item.skuList" :key="index">
              <div>
                {{ item.locationCode }} {{ item.skuName }} 【{{
                  item.skuNum
                }}件】
              </div>
            </template>
            <div style="text-align: right">已验视</div>
          </div>
        </div>
      </template>
    </div>

    <!-- 打印分拣单区域-->
    <div style="width: 76mm; position: absolute; top: -9999px">
      <template v-for="(item, index) in fjdPrintData" :key="index">
        <div class="printDivFjd" :ref="'printDivFjd' + item.outId">
          <!--          <div style="text-align: right;">{{ item.batchCode }} 拣货序号:{{ item.pickSort }}</div>-->
          <h1 style="text-align: center">分拣单</h1>
          <div style="width: 100%; text-align: center">
            <svg :id="'barcode' + item.outId"></svg>
          </div>
          <div style="padding: 10px">
            <div style="display: flex; margin-top: 10px">
              <div style="width: 30%">出库单号:</div>
              <div style="width: 70%; text-align: right">
                {{ item.outCode }}
              </div>
            </div>
            <div style="display: flex; margin-top: 10px">
              <div style="width: 30%">应拣数量:</div>
              <div style="width: 70%; text-align: right">
                {{ item.outNum }}件
              </div>
            </div>
            <div style="display: flex; margin-top: 10px">
              <div style="width: 30%">商品品种:</div>
              <div style="width: 70%; text-align: right">
                {{ item.breedNum }}种
              </div>
            </div>

            <div style="font-size: 8pt">
              <div style="display: flex; text-align: center; margin-top: 10px">
                <div style="flex: 1">商品名称</div>
                <div style="flex: 1">拣货库位</div>
                <div style="flex: 1">拣货数量</div>
              </div>
              <template
                v-for="(sku, skuIndex) in item.detailList"
                :key="skuIndex"
              >
                <div
                  style="display: flex; text-align: center; margin-top: 10px"
                >
                  <div style="flex: 1">{{ sku.skuName }}</div>
                  <div style="flex: 1">
                    <div>{{ sku.locationCode }}</div>
                  </div>
                  <div style="flex: 1">
                    <div>{{ sku.skuNum }}件</div>
                  </div>
                </div>
              </template>
            </div>

            <div style="margin-top: 10px">拣货人:{{ item.pickUserName }}</div>
            <div style="margin-top: 10px">打印时间:{{ printTime }}</div>
          </div>
        </div>
      </template>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="logicVis" title="选择快递" width="800px">
    <vxe-table
      style="margin-top: 10px"
      border
      align="center"
      :data="expressList"
      height="350"
      :checkbox-config="{ trigger: 'row' }"
      :row-config="{ isCurrent: true, isHover: true }"
      ref="expressTable"
    >
      <vxe-column type="radio" width="60"></vxe-column>
      <vxe-column field="id" width="220" title="ID"> </vxe-column>
      <vxe-column field="logistics_name" width="260" title="快递公司名称">
      </vxe-column>
      <vxe-column field="remark" title="备注"> </vxe-column>
    </vxe-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="surePrint">确定</el-button>
        <el-button @click="logicVis = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import { getLodop } from "@/assets/LodopFuncs";
import {
  getPrintConfigList,
  getSelectBmOrderList,
  selectPickOrderList,
  selectSortingOrderList,
  updateOutOrderPrintNum,
  getAsExpressList,
  createBmOrderByThird,
} from "@/api/scApi";
import JsBarcode from "jsbarcode";
import html2canvas from "html2canvas";
import { getNowDate } from "@/utils/shuangcheng";
import { usePrintStore } from "@/store/modules/print";

const { proxy } = getCurrentInstance();
let saveParams = ref({});
const printStore = usePrintStore();

const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false,
  },
  detailList: { type: Array },
  printStatus: { type: Number }, //打印状态，0打印，1补打
  isReprint: { type: String }, //补打类型
});

const emits = defineEmits(["cancel"]);

function handleClose() {
  emits("cancel");
}

let tableList = ref([]);
let LODOP;

let printNumTotal = ref(0); //打印数量合计
let alikeTotal = ref(0); //同品数量合计
let muchTotal = ref(0); //多品数量合计
const logicVis = ref(false);
const expressList = ref([]); //快递列表
const expressTable = ref();
onMounted(() => {
  tableList.value = props.detailList;
  printNumTotal.value = tableList.value.length;
  //计算单品
  let alikeData = tableList.value.filter((item) => item.breedNum === 1);
  alikeTotal.value = alikeData.length;
  //计算多品数量
  let nuchData = tableList.value.filter((item) => item.breedNum !== 1);
  muchTotal.value = nuchData.length;
  setTimeout(() => {
    LODOP = getLodop();
    getPrinterCount();
  }, 500);

  getKdTempList();
  getFjdTempList();
  printStore.connect();
});

//批量删除
function clickBatchDel() {
  const $table = proxy.$refs.tableRef;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    tableList.value = tableList.value.filter(
      (item) => !selectRecords.some((selObj) => selObj.outId === item.outId)
    );
  }
}

function handleDelete(row) {
  tableList.value = tableList.value.filter((item) => item.outId !== row.outId);
}

let printTemp = ref(""); //快递打印模板的值
let printTempList = ref([]); //快递打印模板集合
let printMachine = ref(""); //快递打印机的值
let tempStyle = ref(""); //快递模板样式
let isCloseKd = ref(false); //快递单打印后是否关闭弹框
//获取快递模板
function getKdTempList() {
  let params = {
    pageSize: 0,
    param: { printType: 4, statusSort: true },
  };
  getPrintConfigList(params).then((res) => {
    if (res.code === 200) {
      printTempList.value = res.data;
      //设置默认模板 和默认打印机,样式
      printTemp.value = res.data[0].printConfigId;
      printMachine.value = res.data[0].printMachine;
      let tempData = printTempList.value.filter(
        (temp) => temp.printConfigId === printTemp.value
      )[0]; //获取模板数据
      tempStyle.value = tempData.printStyle;
    }
  });
}

//获取分拣单模板
let printTempFjd = ref(""); //分拣单 打印模板的值
let printTempListFjd = ref([]); //分拣单 打印模板集合
let printMachineFjd = ref(""); //分拣单 打印机的值
let tempStyleFjd = ref(""); //分拣单 模板样式
let isCloseFjd = ref(false); //分拣单 打印后是否关闭弹框
let printTime = ref("");

function getFjdTempList() {
  let params = {
    pageSize: 0,
    param: { printType: 5, statusSort: true },
  };
  getPrintConfigList(params).then((res) => {
    if (res.code === 200) {
      printTempListFjd.value = res.data;
      //设置默认模板 和默认打印机,样式
      printTempFjd.value = res.data[0].printConfigId;
      printMachineFjd.value = res.data[0].printMachine;
      let tempData = printTempListFjd.value.filter(
        (temp) => temp.printConfigId === printTempFjd.value
      )[0]; //获取模板数据
      tempStyleFjd.value = tempData.printStyle;
    }
  });
}

//获取拣货单模板
let printTempJhd = ref(""); //拣货单 打印模板的值
let printTempListJhd = ref([]); //拣货单 打印模板集合
let printMachineJhd = ref(""); //拣货单 打印机的值
let tempStyleJhd = ref(""); //拣货单 模板样式
let isCloseJhd = ref(false); //拣货单 打印后是否关闭弹框
function getJhdTempList() {
  let params = {
    pageSize: 0,
    param: { printType: 3, statusSort: true },
  };
  getPrintConfigList(params).then((res) => {
    if (res.code === 200) {
      printTempListJhd.value = res.data;
      //设置默认模板 和默认打印机,样式
      printTempJhd.value = res.data[0].printConfigId;
      printMachineJhd.value = res.data[0].printMachine;
      let tempData = printTempListJhd.value.filter(
        (temp) => temp.printConfigId === printTempJhd.value
      )[0]; //获取模板数据
      tempStyleJhd.value = tempData.printStyle;
    }
  });
}

//获取打印机
let printNameList = ref([]); //打印机集合
function getPrinterCount() {
  LODOP = getLodop();
  if (LODOP) {
    //获取打印机个数
    let printNum = LODOP.GET_PRINTER_COUNT();
    for (let i = 0; i < printNum; i++) {
      printNameList.value.push(LODOP.GET_PRINTER_NAME(i));
    }
  }
}

//打印快递单
let kdPrintData = ref([]);

function clickPrintKd() {
  const $table = proxy.$refs.tableRef;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    if (selectRecords.length === 0) {
      proxy.$modal.msgWarning("请先选择要打印的数据!");
    } else {
      let outId = selectRecords.map((item) => item.outId);
      logicVis.value = true;
      // getSelectBmOrderList({
      //   outIds: outId,
      //   printStatus: props.printStatus,
      // }).then((res) => {
      //   kdPrintData.value = res.data;
      //   nextTick(async () => {
      //     for (let i = 0; i < kdPrintData.value.length; i++) {
      //       let dataobj = kdPrintData.value[i];
      //       await asyncFunction(dataobj);
      //     }
      //     if (isCloseKd.value) {
      //       handleClose();
      //     }
      //     updatePrintNum(outId);
      //   });
      // });
    }
  }
}

async function asyncFunction(dataobj) {
  return new Promise((resolve) => {
    JsBarcode(".mailNo" + dataobj?.mailno, dataobj?.mailno, {
      width: 1.3,
      height: 20,
      fontSize: "14pt",
      fontOptions: "bold",
      displayValue: true, //是否在条形码下方显示文字
    });
    //打印
    html2canvas(proxy.$refs["printDiv" + dataobj?.mailno][0], {
      backgroundColor: null,
    }).then((canvas) => {
      let url = canvas.toDataURL("image/png");
      if (LODOP) {
        LODOP.PRINT_INIT("");
        LODOP.ADD_PRINT_IMAGE(0, 0, "100%", "100%", url);
        LODOP.SET_PRINT_PAGESIZE(
          1,
          tempStyle.value.width * 10,
          tempStyle.value.height * 10
        ); //设置纸张大小
        LODOP.SET_PRINTER_INDEX(printMachine.value); //设置打印机
        LODOP.PRINT();
      }
      resolve("");
    });
  });
}

//打印分拣单
let fjdPrintData = ref([]);

function clickPrintFjd() {
  const $table = proxy.$refs.tableRef;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    if (selectRecords.length === 0) {
      proxy.$modal.msgWarning("请先选择要打印的数据!");
    } else {
      let outId = selectRecords.map((item) => item.outId);
      selectSortingOrderList({
        outIds: outId,
        printStatus: props.printStatus,
      }).then((res) => {
        fjdPrintData.value = res.data;
        printTime.value = getNowDate();
        nextTick(async () => {
          for (let i = 0; i < fjdPrintData.value.length; i++) {
            let dataobj = fjdPrintData.value[i];
            await asyncFunctionFjd(dataobj);
          }
          if (isCloseFjd.value) {
            handleClose();
          }
          updatePrintNum(outId);
        });
      });
    }
  }
}

async function asyncFunctionFjd(dataobj) {
  return new Promise((resolve) => {
    JsBarcode("#barcode" + dataobj.outId, dataobj.outCode, {
      width: 1.3,
      height: 20,
      fontSize: "14pt",
      fontOptions: "bold",
      displayValue: true, //是否在条形码下方显示文字
    });
    //打印
    html2canvas(proxy.$refs["printDivFjd" + dataobj.outId][0], {
      backgroundColor: null,
    }).then((canvas) => {
      let url = canvas.toDataURL("image/png");
      if (LODOP) {
        LODOP.PRINT_INIT("");
        LODOP.ADD_PRINT_IMAGE(0, 0, "100%", "100%", url);
        LODOP.SET_PRINT_PAGESIZE(
          1,
          tempStyleFjd.value.width * 10,
          tempStyleFjd.value.height * 10
        ); //设置纸张大小
        LODOP.SET_PRINTER_INDEX(printMachineFjd.value); //设置打印机
        LODOP.PRINT();
      }
    });
    resolve("");
  });
}

//打印拣货单
let jhdPrintData = ref({});

function clickPrintJhd() {
  const $table = proxy.$refs.tableRef;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    if (selectRecords.length === 0) {
      proxy.$modal.msgWarning("请先选择要打印的数据!");
    } else {
      let outId = selectRecords.map((item) => item.outId);
      selectPickOrderList({ outIds: outId }).then((res) => {
        jhdPrintData.value = res.data;
        printTime.value = getNowDate();
        nextTick(() => {
          //打印
          let strFormHtml = document.querySelector("#printDivJhd").innerHTML;
          LODOP.PRINT_INIT(""); //初始化
          LODOP.SET_PRINT_PAGESIZE(
            1,
            tempStyleJhd.width * 10,
            tempStyleJhd.height * 10
          ); //设置纸张大小
          LODOP.ADD_PRINT_HTM("1%", "1%", "98%", "98%", strFormHtml); //设置打印内容
          LODOP.SET_PRINTER_INDEX(printMachineJhd.value); //设置打印机
          LODOP.PRINT();
          if (isCloseJhd.value) {
            handleClose();
          }
          updatePrintNum(outId);
        });
      });
    }
  }
}

//更新打印次数
function updatePrintNum(outIds) {
  updateOutOrderPrintNum({ outIds: outIds }).then();
}

watch(logicVis, (val) => {
  const $table = proxy.$refs.tableRef;
  const selectRecords = $table.getCheckboxRecords();
  let outIds = selectRecords.map((item) => item.outId).join(",");
  if (val) {
    getAsExpressList({ outIds }).then((res) => {
      expressList.value = res.data;
    });
  }
});

function surePrint() {
  const $table = proxy.$refs.tableRef;
  const selectRecords = $table.getCheckboxRecords();
  const expressList = expressTable.value.getRadioRecord();
  let outIds = selectRecords.map((item) => item.outId).join(",");
  if (!expressList) {
    proxy.$modal.msgWarning("请先选择快递!");
    return;
  }
  const params = {
    outIds,
    warehouseExpressId: expressList.id,
  };

  createBmOrderByThird(params).then(async (res) => {
    if (res.code == 200) {
      const printObj = res.data?.map((item) => {
        return JSON.parse(item);
      });
      const taskID = printStore.getUUID(8, 10);
      const request = {
        cmd: "print",
        requestID: Date.parse(new Date()),
        version: "1.0",
        task: {
          taskID,
          preview: false,
          printer: printMachine.value,
          previewType: "pdf",
          firstDocumentNumber: 10,
          totalDocumentCount: 100,
          documents: [
            {
              documentID: "",
              contents: [...printObj],
            },
          ],
        },
      };
      await printStore.send(JSON.stringify(request));
      //更新打印接口 状态变为已打印
      updatePrintNum(outIds.length ? outIds.split(",") : []);
    } else {
      proxy.$modal.msgError("打印信息获取失败");
    }
  });
}
</script>

<style scoped lang="scss">
//表格合并
:deep(.flexTd) {
  padding: 0 !important;

  .vxe-cell {
    padding: 0 !important;
  }
}

.flexSub {
  height: 50px;
  line-height: 50px;
}

.flexSub:not(:last-child) {
  border-bottom: 1px solid #e8eaec;
}

.printDiv {
  margin: 0 auto;
  width: 74mm;
  height: 126mm;
  border: 1px solid black;
  font-family: "黑体", sans-serif;

  .printTop {
    display: flex;
    width: 100%;
    height: 13mm;
    border-bottom: 1px solid black;

    .topleft {
      padding-top: 5mm;
      padding-left: 2mm;
      width: 60mm;

      .toptext {
        width: 30mm;
        height: 4mm;
        font-size: 6pt;
      }

      .topTime {
        width: 42mm;
        height: 5mm;
        font-size: 8pt;
      }
    }

    .topright {
      width: 16mm;
      height: 12mm;
      font-size: 13pt;
      line-height: 12mm;
      text-align: right;
    }
  }

  .printPosition {
    width: 100%;
    height: 10mm;
    font-size: 26pt;
    font-weight: bold;
    text-align: center;
  }

  .printCenter {
    display: flex;
    margin: 0 auto;
    width: 95%;
    height: 58mm;
    border: 1px solid black;

    .centerLeft {
      width: 54mm;
      height: 58mm;
      border-right: 1px solid black;

      .cenLeftA {
        width: 54mm;
        height: 16mm;
        border-bottom: 1px solid black;
      }

      .cenLeftB {
        width: 54mm;
        height: 6mm;
        border-bottom: 1px solid black;
        font-size: 12pt;
      }

      .cenLeftC {
        display: flex;
        width: 54mm;
        height: 6mm;
        border-bottom: 1px solid black;
        font-size: 16pt;
        font-weight: bold;

        .ctext {
          border: 2px solid black;
          font-weight: bold;
        }
      }

      .cenLeftD {
        display: flex;
        width: 54mm;
        height: 20mm;
        border-bottom: 1px solid black;
        font-size: 11pt;

        .dshou {
          width: 6mm;
          height: 6mm;
          border: 2px solid black;
          border-radius: 4mm;
          margin-top: 3mm;
          text-align: center;
        }
      }

      .cenLeftE {
        display: flex;
        width: 54mm;
        height: 10mm;
        font-size: 8pt;

        .eji {
          margin-top: 1mm;
          font-size: 11pt;
          width: 6mm;
          height: 6mm;
          border: 2px solid black;
          border-radius: 4mm;
          text-align: center;
        }
      }
    }

    .centerRight {
      width: 14mm;
      height: 54mm;
      margin-left: 15mm;
      transform: rotate(90deg);
      transform-origin: 0% 0%;
    }
  }

  .printBottom {
    margin: 0 auto;
    width: 95%;
    padding-top: 2mm;
  }
}
</style>
